<template>
  <div class="container">
    <a-form>
      <table border="1" cellspacing="0" cellpadding="0">
        <tr style="height: 40px"  class="title_tr no_border">
          <td class="no_border"><img src="@/assets/aee_execl.png" style="height: 40px"></td>
          <td colspan="10" style="text-align: center ;font-size: larger" class="no_border">{{year}} 年 {{ month }}     月份工作目标与绩效管理</td>
        </tr>
        <tr style="height: 40px" class="no_border">
          <td class="no_border">中心：</td>
          <td class="no_border">{{user.center}}</td>
          <td class="no_border">部门：</td>
          <td class="no_border">{{user.orgCodeTxt}}</td>
          <td class="no_border">职务：</td>
          <td colspan="3" class="no_border">{{user.post}}</td>
          <td class="no_border">姓名：</td>
          <td colspan="3" class="no_border">{{user.realname}}</td>
        </tr>
        <tr>
          <th>类别</th>
          <th>序号</th>
          <th colspan="2">重点工作内容</th>
          <th colspan="3" style="width: 400px">结果评价及验收标准</th>
          <th>考核分值</th>
          <th>自评分</th>
          <th>上级评分</th>
          <th class="center_backgroud">中心领导</th>
        </tr>

        <tr v-for="(item,index) in contents" :key="index">

          <th v-if="index==0" :rowspan="contents.length" style="color: red">一、工作任务(权重30%)</th>
          <td>
            <a-popover title="操作">
              <template #content>
                <a-button danger block @click="deleteImport(item)">删除</a-button>
                <a-button block @click="addLineImport()">添加一行</a-button>
              </template>
              <span> {{ item.index }}</span>
            </a-popover>
          </td>
          <td class="important_tr" colspan="2" :contenteditable="selfEditAble" v-html="item.workContent"
              @blur="item.workContent=$event.target.innerText">
            <!--          <a-form-item>-->
            <!--            <a-textarea :auto-size="true" class="content_full" placeholder="请输入"  style="height: auto" :value="item.content"/>-->
            <!--          </a-form-item>-->
          </td>
          <td colspan="3" :contenteditable="selfEditAble" v-html="item.checkMethod"
              @blur="item.checkMethod=$event.target.innerText">
            <!--          <a-form-item>-->
            <!--            <a-textarea  class="content_full" placeholder="请输入" style="height: auto" :value="item.h2"/>-->
            <!--          </a-form-item>-->
          </td>
          <td>0或10</td>
          <td :contenteditable="selfEditAble" v-html="item.selfScore" @blur="blurNumFunc($event,1,index,'selfScore')">
            <!--            <a-input-number :min="0" :max="10" :step="10"/>-->
          </td>
          <td :contenteditable="superiorEditAble" v-html="item.superiorScore"
              @blur="blurNumFunc($event,1,index,'superiorScore')">
            <!--            <a-input-number :min="0" :max="10" :step="10"/>-->
          </td>
          <td :contenteditable="centerEditAble" v-html="item.centerScore" class="center_backgroud"
              @blur="blurNumFunc($event,1,index,'centerScore')">
            <!--            <a-input-number :min="0" :max="10" :step="10"/>-->
          </td>
        </tr>
        <tr>
          <th :rowspan="assessments.length+3" style="color: red">二、月考核指标(权重90%)</th>
        </tr>
        <tr>
          <th>方式</th>
          <th>KPI指标</th>
          <th>指标定义</th>
          <th>权重</th>
          <th colspan="3">考核目标值及计分方式</th>
          <th>自评分</th>
          <th>上级评分</th>
          <th class="center_backgroud">中心领导</th>
        </tr>
        <tr style="background: yellow">
          <td :rowspan="assessments.length+1" style="background: white">KPI考核</td>
          <td>根据部门岗位定考核指标</td>
          <td>根据KPI指标定义</td>
          <td>根据KPI指定标权重比率</td>
          <td colspan="3">根据KPI指标目标值列出考核达成率，上限计分不超权重的20%</td>
          <td></td>
          <td></td>
          <td class="center_backgroud"></td>
        </tr>
        <tr v-for="(item,index) in assessments " :key="index">
          <td class="assessment_tr" :contenteditable="selfEditAble" v-html="item.kpiAssessment"
              @blur="item.kpiAssessment=$event.target.innerText">
            <!--            <a-form-item>-->
            <!--              <a-textarea class="content_full" placeholder="请输入" style="height: auto" :value="item.h2"/>-->
            <!--            </a-form-item>-->
          </td>
          <td :contenteditable="selfEditAble" v-html="item.assessmentDefine"
              @blur="item.assessmentDefine=$event.target.innerText"></td>
          <td :contenteditable="selfEditAble" v-html="item.assessWeight"
              @blur="item.assessWeight=$event.target.innerText"></td>
          <td colspan="3" align="left" :contenteditable="selfEditAble" v-html="item.targetValue"
              @blur="item.targetValue=$event.target.innerText">
            <!--            A，积极加入苍穹项目，积极参与项目会议及需求分析<br/>-->
            <!--            B，积极加入，主动分析难点，积极讨论<br/>-->
            <!--            C，消极抵制，无理逃避-->
          </td>
          <td :contenteditable="selfEditAble" v-html="item.selfScore" @blur="blurNumFunc($event,2,index,'selfScore')
          ">
            <!--            <a-input-number :min="0" :max="10" :step="10"/>-->
          </td>
          <td :contenteditable="superiorEditAble" v-html="item.superiorScore"
              @blur="blurNumFunc($event,2,index,'superiorScore')">
            <!--            <a-input-number :min="0" :max="10" :step="10"/>-->
          </td>
          <td :contenteditable="centerEditAble" v-html="item.centerScore" class="center_backgroud"
              @blur="blurNumFunc($event,2,index,'centerScore')">
            <!--            <a-input-number :min="0" :max="10" :step="10"/>-->
          </td>
        </tr>
        <tr>
          <td colspan="8">总合计分数</td>
          <td>{{ lastSelfScore }}</td>
          <td>{{ lastSuperiorScore }}</td>
          <td class="center_backgroud">{{ lastCenterScore }}</td>
        </tr>
        <tr>
          <th rowspan="4">三、结果评价</th>
          <th colspan="1">个人资源需求说明</th>
          <td colspan="5" align="left" :contenteditable="selfEditAble" v-html="resultAssess.requirements"
              @blur="resultAssess.requirements=$event.target.innerText"></td>
          <td>被考核人签名</td>
          <!--          本人签名-->
          <td colspan="3"></td>
        </tr>
        <tr class="center_backgroud">
          <th colspan="1">上级评价</th>
          <td colspan="5" align="left" :contenteditable="superiorEditAble" v-html="resultAssess.superAssess"
              @blur="resultAssess.superAssess=$event.target.innerText">肯定项/改进项说明:
          </td>
          <td>直接上级审批</td>
          <!--          上级签字-->
          <td colspan="3"></td>
        </tr>
        <tr class="center_backgroud">
          <th colspan="1">中心领导评价</th>
          <td colspan="5" align="left" :contenteditable="centerEditAble" v-html="resultAssess.centerAssess"
              @blur="resultAssess.centerAssess=$event.target.innerText">肯定项/改进项说明：
          </td>
          <td>中心领导审批</td>
          <!--          上级中心领导签字-->
          <td colspan="3"></td>
        </tr>
        <tr>
          <th colspan="1">最终得分</th>
          <td colspan="5">绩效得分(直接上级评分)±绩效异常分±个人奖惩得分(人力资源部评分)</td>
          <td colspan="4" contenteditable="true" v-html="resultAssess.resultSocre"
              @blur="resultAssess.resultSocre=$event.target.innerText"></td>
        </tr>
        <tr style="color: red">
          <th rowspan="6">四、绩效考核说明</th>
          <th colspan="10" rowspan="6" style="text-align: left" >
            1、工作任务项每个月必须至少有三项重点工作，三项重点工作考核结果只有0分或10分（部门负责人不得打出1-9分）；<br/>
            2、员工当月绩效低于85分，将视为当月工作未能满足岗位要求；<br/>
            3、员工在连续十二个月内累积三个月绩效考核低于85分，公司将确定其本人不符合公司岗位要求，公司将给予调岗处理；当员工连续十二个月内累积两个月低于85分时部门负责人与人力资源部应及时找其谈话，提醒不断提高自身的工作能力，给予警示。<br/>
            4、各职能中心员工绩效分（按人员数量）等级占比为：A类110分-120分不超过5%：B类105分-109分不超过20%：C类100分-104分不超过60%；<br/>
            5、绩效确认生效，即发放工资完毕，如无异议则视为员工对本次绩效考核确认。如有异议，可以书面向上级申诉及简单说明申诉原因，申诉成功后，由员工本人再签字确认。<br/>
          </th>
        </tr>
      </table>
    </a-form>
  </div>
</template>

<script>
import {USER_INFO} from '@/store/mutation-types'
import { mapActions, mapGetters,mapState } from 'vuex'
import moment from 'moment';

import Vue from "vue";

class Improtent {
  index;
  workContent;
  checkMethod;
  selfScore;
  superiorScore;
  centerScore;

  constructor(index) {
    this.index = index;
  }
}

class Assessments {
  index;
  kpiAssessment;
  assessmentDefine = "完成";
  assessWeight;
  targetValue;
  selfScore;
  superiorScore;
  centerScore;

  constructor(index) {
    this.index = index;
  }
}

export default {
  name: 'JavaForm',
  data() {
    return {
      contents: [
        new Improtent(1), new Improtent(2), new Improtent(3)
      ],
      assessments: [new Assessments(1),new Assessments(2),new Assessments(3)],
      year: 2022,
      month: 12,
      status: 0,
      user:this.userInfo(),
      // lastSelfScore:0,
      // lastSuperiorScore:0,
      // lastCenterScore:0,
      //最后的评价结果
      resultAssess: {
        //个人需求说明
        requirements: "",
        //个人签名
        selfSign: "",
        //上级评价
        superAssess: "",
        //上级签名
        superSign: "",
        //中心评价
        centerAssess: '',
        //中心签名
        centerSign: "",
        //最后得分
        resultSocre: 0,

      },
    }
  },
  created() {
  },
  mounted() {
  },
  computed: {
    //自己可编辑
    selfEditAble: function () {
      //
      return true;
    },
    superiorEditAble: function () {
      return true;
    },
    centerEditAble: function () {
      return true;
    },
    lastSelfScore: function () {
      return this.getLastScore('selfScore')

    },
    lastSuperiorScore: function () {
      return this.getLastScore('superiorScore')
    },
    lastCenterScore: function () {
      return this.getLastScore('centerScore')
    },

  },
  // watch: {
  //   contents: {
  //     handler: function (val, oldVal) {
  //       // this.contents=val;
  //       // console.log(this.contents)
  //     this.lastSuperiorScore=  this.getLastScore('superiorScore');
  //      this.lastSelfScore=this.getLastScore('selfScore')
  //      this.lastCenterScore=this.getLastScore('lastCenterScore')
  //     },
  //     immediate: true,
  //     deep: true
  //   },
  //   assessments:{
  //     handler: function (val, oldVal) {
  //       // this.assessments=val;
  //       this.lastSuperiorScore=  this.getLastScore('superiorScore');
  //       this.lastSelfScore=this.getLastScore('selfScore')
  //       this.lastCenterScore=this.getLastScore('lastCenterScore')
  //     },
  //     immediate: true,
  //     deep: true
  //   },
  // },
  methods: {
    ...mapGetters(["nickname", "avatar","userInfo"]),
    deleteImport(item) {
      if (this.contents.length>3){
        this.contents.splice(item);
        //重新排序
        this.contents.forEach((item,index)=>{
          item.index=index+1;
        })
      }else{
        this.$message.error("工作任务考核指标最少需要三项，不能删除")
      }

    },
    addLineImport() {
      this.contents.push(new Improtent(this.contents.length + 1)
       );
    },
    blurNumFunc(e, type, index,attr) {
      //失去焦点实现双向数据绑定
      let content = e.target.innerText
      if (content==undefined||content===''){
        return false;
      }
//判断是否是数字
      if (!this.isIntNum(content)) {
        e.target.innerText = '';
        this.$message.error("请输入数字");
        return false;
      }
      content=parseInt(content);
      if (type === 1) {
        if (content === 0 || content === 10) {
         this.contents[index][attr]=content;
        } else {
          e.target.innerText = '';
          this.$message.error("评价分数只能是0或10");
        }
      } else {
        this.assessments[index][attr]=content;
      }

    },

    isIntNum(val) {
      console.log(val)
      var numReg = /^[0-9]*$/
      var numRe = new RegExp(numReg)
      if (numRe.test(val) ) {
        return true;
      } else {
        return false;
      }

    },
    //根据传入的属性获取分数
    getLastScore(attr) {
      let score = 0;
      this.contents.forEach(item => {
        if (item && item[attr]) {

          score += item[attr];
        }
      })
      this.assessments.forEach(item => {
        if (item && item[attr]) {

          score += item[attr];
        }
      })
      return score;
    }
  }
}
</script>

<style scoped lang="less">
@import '~@assets/less/common.less';
//table {
//  th {
//    width: 120px;
//    height: 50px;
//    line-height: 25px;
//    padding: 5px;
//  }
//
//  td {
//    font-weight: bold;
//    text-align: center;
//    height: auto;
//    line-height: 25px;
//    padding: 0px;
//  }
//  tr {
//    font-weight: bold;
//    text-align: center;
//    height: auto;
//    line-height: 25px;
//    padding: 0px;
//  }
//}
table {
  th {
    width: 120px;
    height: 50px;
    line-height: 25px;
    padding: 5px;
  }

  td {
    font-weight: bold;
    text-align: center;
    height: 30px;
    line-height: 25px;
    padding: 5px;
  }

  th {
    text-align: center;
  }
}
.title_tr{
  font-weight: bold;
  text-align: center;
  height: 30px;
  line-height: 25px;
  padding: 5px;
}
.no_border{
  border: none;

}
.important_tr {
  min-height: 55px;
}

.assessment_tr {
  min-height: 100px;

}
.center_backgroud{
  background-color: #cda0a2;
}

//.ant-input {
//  box-sizing: border-box;
//  margin: 0;
//  padding: 0;
//  font-variant: tabular-nums;
//  list-style: none;
//  font-feature-settings: 'tnum';
//  position: relative;
//  display: inline-block;
//  width: 100%;
//  height: 32px;
//  padding: 4px 11px;
//  color: rgba(0, 0, 0, 0.65);
//  font-size: 14px;
//  line-height: 1.5;
//  background-color: #fff;
//  background-image: none;
//  border: 1px solid #f8f8f8;
//  min-height: 55px;
//  /* border-radius: 4px; */
//  transition: all 0.3s;
//}
//
//.content_full {
//  height: 100%;
//  width: 100%;
//}
//.ant-form-item {
//  box-sizing: border-box;
//  margin: 0;
//  padding: 0;
//  color: rgba(0, 0, 0, 0.65);
//  font-size: 14px;
//  font-variant: tabular-nums;
//  line-height: 1.5;
//  list-style: none;
//  font-feature-settings: 'tnum';
//   margin-bottom: 0px;
//  vertical-align: top;
//}

</style>
